<script  lang="ts" setup name="Person">
//  ref =====> 可以定义：基本类型、对象类型的响应式数据
//  reactive > 只能定义：对象类型的响应式数据
import {reactive,ref} from "vue";
let car = reactive({name:'奔驰',price:100})
let sum = ref(0)

function changePrice  (){
  car.price += 10
}
function changeName(){
  car.name = '宝马'
}
function summation(){
  sum.value +=1
}
function changeCar(){
  // car = {name:'奥托',price: 1} //这样写页面是不更新的
  // car = reactive({name:'奥托',price: 1}) //这样写页面也是不更新的
  // 下面这种写法可以更新
  Object.assign(car,{name:'奥托',price:1})
}
</script>

<template>
  <div class="prisonBox">
    <div>汽车的信息：汽车的名字{{car.name}}，汽车的价格{{car.price}}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeName">修改汽车的名字</button>
    <button @click="changeCar">修改汽车</button>
    <hr>
    <div>累加的和{{sum}}</div>
    <button @click="summation">求和</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>